<template>
	<el-dialog
		title="注单详情"
		:visible="true"
		width="1200px"
		class="rempadding"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<el-descriptions title="投注人信息" :column="4">
			<el-descriptions-item label="账号类型">
				kooriookami
			</el-descriptions-item>
			<el-descriptions-item label="会员账号">
				18100000000
			</el-descriptions-item>
			<el-descriptions-item label="上级代理">苏州市</el-descriptions-item>
			<el-descriptions-item label="游戏账号">学校</el-descriptions-item>
			<el-descriptions-item label="账号状态">
				<el-tag size="small">正常</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="该类游戏总输赢">
				<span :style="handleNumberColor(18000)">
					{{ handleNumber('USDT', 18000, 2, true, true) }}
				</span>
			</el-descriptions-item>
			<el-descriptions-item label="总代账号">正式</el-descriptions-item>
		</el-descriptions>
		<el-divider></el-divider>
		<el-descriptions title="第二次结算注单详情" :column="4">
			<el-descriptions-item label="注单号">
				kooriookami
			</el-descriptions-item>
			<el-descriptions-item label="三方订单号">
				kooriookami
			</el-descriptions-item>
			<el-descriptions-item label="游戏平台">
				18100000000
			</el-descriptions-item>
			<el-descriptions-item label="比赛类型">苏州市</el-descriptions-item>
			<el-descriptions-item label="投注金额">学校</el-descriptions-item>
			<el-descriptions-item label="投注Ip">ip</el-descriptions-item>
			<el-descriptions-item label="有效投注">
				<span :style="handleNumberColor(18000)">
					{{ handleNumber('USDT', 18000, 2, true, true) }}
				</span>
			</el-descriptions-item>
			<el-descriptions-item label="投注终端">正式</el-descriptions-item>
			<el-descriptions-item label="同步时间">
				<span class="red">2024-5-3 23:59:59</span>
			</el-descriptions-item>
			<el-descriptions-item label="输赢金额">
				<span :style="handleNumberColor(18000)">
					{{ handleNumber('USDT', 18000, 2, true, true) }}
				</span>
			</el-descriptions-item>
			<el-descriptions-item label="投注时间">
				<span class="red">2024-5-3 23:59:59</span>
			</el-descriptions-item>
			<el-descriptions-item label="结算时间">
				<span class="red">2024-5-3 23:59:59</span>
			</el-descriptions-item>
			<el-descriptions-item label="注单状态">正式</el-descriptions-item>
			<el-descriptions-item label="是否重算">
				<span class="red">2024-5-3 23:59:59</span>
			</el-descriptions-item>
		</el-descriptions>

		<el-descriptions direction="vertical" :column="4" border>
			<el-descriptions-item label="赛事详情">
				kooriookami
			</el-descriptions-item>
			<el-descriptions-item label="盘口详情">
				18100000000
			</el-descriptions-item>
			<el-descriptions-item label="注单详情">苏州市</el-descriptions-item>
			<el-descriptions-item label="结算时间">
				江苏省苏州市吴中区吴中大道 1188 号
			</el-descriptions-item>
		</el-descriptions>
		<h3>关联账变记录</h3>
		<el-table
			v-loading="loading"
			ref="elTable"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:max-height="tableHeight"
			:data="tableData"
			v-bind="$attrs"
			v-on="$listeners"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				v-for="(item, index) in newCol"
				:key="'column_' + index"
				:prop="newCol[index].prop"
				:align="item.alignCenter"
				:label="item.label"
				:min-width="item.minWidth"
				:fixed="item.isFixed"
				:sortable="item.isSortColumn"
				:show-overflow-tooltip="item.isShowTip"
			>
				<template slot="header">
					<span v-if="item.itemTipContent">
						{{ item.label }}
						<el-tooltip
							class="item"
							effect="dark"
							:content="item.itemTipContent"
							placement="top-start"
						>
							<i class="el-icon-question"></i>
						</el-tooltip>
					</span>
					<span v-else>
						{{ item.label }}
					</span>
				</template>
				<template slot-scope="{ row }">
					<div v-if="item.solt === 'numberSolt'">
						<span
							:style="handleNumberColor(row[newCol[index].prop])"
						>
							{{
								handleNumber(
									'USDT',
									row[newCol[index].prop],
									2,
									true,
									true
								)
							}}
						</span>
					</div>
					<div v-if="item.solt === 'noColorNumberSolt'">
						<span>
							{{
								handleNumber(
									'USDT',
									row[newCol[index].prop],
									2,
									true,
									true
								)
							}}
						</span>
					</div>
					<div v-if="item.solt === 'defaultSolt'">
						<span>
							{{ row[newCol[index].prop] || '-' }}
						</span>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			:current-page.sync="pageNum"
			background
			class="pagination"
			layout="total, sizes,prev, pager, next, jumper"
			:page-size.sync="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		<div slot="footer" class="dialog-footer" style="text-align: center">
			<el-button type="primary" @click="handleClose">关闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
import { getDialogTableColumns } from './columns'

export default {
  components: {},
  mixins: [list],
  props: {
    curData: {
      type: Object,
      default: () => { }
    },
    visible: {
      type: Boolean,
      default: false
    },
    handleVisible: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      tableHeight: '480',
      newCol: [],
      tableData: []
    }
  },
  created() {
    this.newCol = getDialogTableColumns()
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    loadData() {
      this.loading = true
      this.$api
        .memberTeamBillList({ 'memberType': 6, 'searchMemberName': 'dzzd01', 'pageNum': 1, 'pageSize': 100, 'cycleEndDate': 20240505, 'cycleStartDate': 20240414 })
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            this.tableData = res?.data?.record || []
            this.total = res?.data?.totalRecord || 0
            this.subSummary = res?.data?.summary || {}
          }
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .rempadding .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;
	.contentBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contentBox,
	form {
		padding: 0 20px;
	}
}
.contentBox {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}
.childer-box {
	width: 100%;
	display: flex;
	.silder {
		width: 25%;
		padding-right: 20px;
		.row {
			margin-top: 20px;
			.switch {
				cursor: pointer;
			}
		}
		.display-tow {
			display: flex;
			justify-content: space-between;
		}
		.lower-user {
			padding-left: 30px;
			margin-top: 10px;
			box-sizing: border-box;
			.list {
				padding: 5px 0;
			}
			.active {
				background: rgba(129, 211, 248, 1);
				color: #ffffff !important;
			}
		}
	}
	.table-content {
		width: 100%;
	}
}
.red{
	color: red;
}
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
	text-align: center;
}
.pagination{
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}
</style>
